const zzb = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

export const option3 = {
  animation: null,
  legend: {
    data: [{ name: '水位', icon: 'none' }, { name: '流量', icon: 'none' }, '校核洪水位'],
    selected: {
      水位: true,
      流量: false,
    },
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    splitLine: {
      //网格线
      show: true,
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: [
    {
      show: true,
      name: '水位',
      type: 'value',
    },
    {
      show: true,
      name: '流量',
      type: 'value',
    },
  ],
  series: [
    {
      id: 'canMove', //在属性表示该线条可以拖动
      name: '水位',
      yAxisIndex: 0, //选择以哪一个轴为基准
      data: [820, 932, 901, 934, 970, 730, 820],
      type: 'line',
      smooth: true,
    },
    {
      name: '流量',
      yAxisIndex: 1, //选择以哪一个轴为基准
      data: [820, 732, 601, 834, 990, 970, 820],
      type: 'line',
      smooth: true,
    },
    {
      name: '校核洪水位',
      type: 'line',
      yAxisIndex: 0,
      legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
      data: zzb.map((item, i, self) => {
        let label = {};

        if (i == Math.round((self.length - 1) / 2)) {
          label = {
            show: true,
            formatter: (cur) => {
              return `${cur.seriesName}:${cur.value[1]}m`;
            },
            padding: [5, 1],
            position: 'inside',
            backgroundColor: '#32cd32',
            color: '#fff',
          };
        }
        return { label, value: [item, 500], symbolSize: 0, symbol: 'circle' };
      }),
    },
  ],
};
